389. Araxis Merge File Comparison Report

Produced by Araxis Merge on 2021-05-13 09:09:20 +0000. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.

389.1 Files compared

#LocationFileLast Modified
1/Applications/Ampps/www/Porto 3.2.2/Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/porto_rtl/Magento_Checkout/web/css/source/module/checkout_shipping.less2016-05-15 09:49:06 +0000
2/Applications/Ampps/www/Porto v4.0.0/Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/porto_rtl/Magento_Checkout/web/css/source/module/checkout_shipping.less2021-02-04 09:27:02 +0000

389.2 Comparison summary

DescriptionBetween
Files 1 and 2
Text BlocksLines
Unchanged3676
Changed00
Inserted00
Removed25

389.3 Comparison options

WhitespaceConsecutive whitespace is treated as a single space
Character caseDifferences in character case are significant
Line endingsDifferences in line endings (CR and LF characters) are ignored
CR/LF charactersNot shown in the comparison detail
Active line-pairing rules

389.4 Active regular expressions

No regular expressions were active.

389.5 Comparison detail

1 // /** 1 // /**
2 //  * Copyright © 2015 Magento. All rights reserved. 2 //  * Copyright © 2015 Magento. All rights reserved.
3 //  * See COPYING.txt for license details. 3 //  * See COPYING.txt for license details.
4 //  */ 4 //  */
5  5 
6 // 6 //
7 //  Variables 7 //  Variables
8 //  _____________________________________________ 8 //  _____________________________________________
9  9 
10 @checkout-shipping-address__max-width: 500px; 10 @checkout-shipping-address__max-width: 500px;
11 @checkout-shipping-address__margin-top: 28px; 11 @checkout-shipping-address__margin-top: 28px;
12  12 
13 @checkout-shipping-item-icon__background-color: @checkout-shipping-item__active__border-color; 13 @checkout-shipping-item-icon__background-color: @checkout-shipping-item__active__border-color;
14 @checkout-shipping-item-icon__color: @color-white; 14 @checkout-shipping-item-icon__color: @color-white;
15 @checkout-shipping-item-icon__content: @icon-checkmark; 15 @checkout-shipping-item-icon__content: @icon-checkmark;
16  16 
17 @checkout-shipping-item__border: 2px solid transparent; 17 @checkout-shipping-item__border: 2px solid transparent;
18 @checkout-shipping-item__line-height: 30px; 18 @checkout-shipping-item__line-height: 30px;
19 @checkout-shipping-item__margin: 0 0 @indent__base; 19 @checkout-shipping-item__margin: 0 0 @indent__base;
20 @checkout-shipping-item__padding: @indent__base @indent__base @indent__base (@indent__l + 5px); 20 @checkout-shipping-item__padding: @indent__base @indent__base @indent__base (@indent__l + 5px);
21 @checkout-shipping-item__transition: .3s border-color; 21 @checkout-shipping-item__transition: .3s border-color;
22 @checkout-shipping-item__width: 100%/3; 22 @checkout-shipping-item__width: 100%/3;
23 @checkout-shipping-item-tablet__width: 100%/2; 23 @checkout-shipping-item-tablet__width: 100%/2;
24 @checkout-shipping-item-mobile__width: 100%; 24 @checkout-shipping-item-mobile__width: 100%;
25 @checkout-shipping-item__active__border-color: @color-orange-red1; 25 @checkout-shipping-item__active__border-color: @color-orange-red1;
26  26 
27 @checkout-shipping-item-icon__selected__height: 27px; 27 @checkout-shipping-item-icon__selected__height: 27px;
28 @checkout-shipping-item-icon__selected__width: 29px; 28 @checkout-shipping-item-icon__selected__width: 29px;
29  29 
30 @checkout-shipping-item-mobile__padding: 0 0 15px; 30 @checkout-shipping-item-mobile__padding: 0 0 15px;
31 @checkout-shipping-item-mobile__margin: @checkout-shipping-item-mobile__padding; 31 @checkout-shipping-item-mobile__margin: @checkout-shipping-item-mobile__padding;
32 @checkout-shipping-item-mobile__active__padding: 15px 18px 15px (@indent__l + 5px); 32 @checkout-shipping-item-mobile__active__padding: 15px 18px 15px (@indent__l + 5px);
33  33 
34 @checkout-shipping-item-before__border-color: @color-gray80; 34 @checkout-shipping-item-before__border-color: @color-gray80;
35 @checkout-shipping-item-before__height: calc(~"100% - 20px"); 35 @checkout-shipping-item-before__height: calc(~"100% - 20px");
36  36 
37 @checkout-shipping-method__border: @checkout-step-title__border; 37 @checkout-shipping-method__border: @checkout-step-title__border;
38 @checkout-shipping-method__padding: @indent__base; 38 @checkout-shipping-method__padding: @indent__base;
39  39 
40 // 40 //
41 //  Common 41 //  Common
42 //  _____________________________________________ 42 //  _____________________________________________
43  43 
44 & when (@media-common = true) { 44 & when (@media-common = true) {
45  45 
46     .opc-wrapper { 46     .opc-wrapper {
47  47 
48         // 48         //
49         //  Shipping Address 49         //  Shipping Address
50         //  --------------------------------------------- 50         //  ---------------------------------------------
51  51 
52         .form-login, 52         .form-login,
53         .form-shipping-address { 53         .form-shipping-address {
54             .lib-css(margin-top, @checkout-shipping-address__margin-top); 54             .lib-css(margin-top, @checkout-shipping-address__margin-top);
55             .lib-css(margin-bottom, @checkout-shipping-address__margin-top); 55             .lib-css(margin-bottom, @checkout-shipping-address__margin-top);
56             .fieldset { 56             .fieldset {
57                 .field { 57                 .field {
58                     .label { 58                     .label {
59                         font-weight: @font-weight__regular; 59                         font-weight: @font-weight__regular;
60                     } 60                     }
61                 } 61                 }
62                 .note { 62                 .note {
63                     font-size: @font-size__base; 63                     font-size: @font-size__base;
64                     margin-top: @indent__s; 64                     margin-top: @indent__s;
65                 } 65                 }
66             } 66             }
67         } 67         }
68  68 
69         .shipping-address-items {    
70             font-size: 0;    
71         }    
72     
73         .shipping-address-item { 69         .shipping-address-item {
74             &:extend(.abs-add-box-sizing all); 70             &:extend(.abs-add-box-sizing all);
75             .lib-css(border, @checkout-shipping-item__border); 71             .lib-css(border, @checkout-shipping-item__border);
76             .lib-css(font-size, @font-size__base); 72             .lib-css(font-size, @font-size__base);
77             .lib-css(line-height, @checkout-shipping-item__line-height); 73             .lib-css(line-height, @checkout-shipping-item__line-height);
78             .lib-css(margin, @checkout-shipping-item__margin); 74             .lib-css(margin, @checkout-shipping-item__margin);
79             .lib-css(padding, @checkout-shipping-item__padding); 75             .lib-css(padding, @checkout-shipping-item__padding);
80             .lib-css(transition, @checkout-shipping-item__transition); 76             .lib-css(transition, @checkout-shipping-item__transition);
81             .lib-css(width, @checkout-shipping-item-tablet__width); 77             .lib-css(width, @checkout-shipping-item-tablet__width);
82             display: inline-block; 78             display: inline-block;
83             position: relative; 79             position: relative;
84             vertical-align: top; 80             vertical-align: top;
85             word-wrap: break-word; 81             word-wrap: break-word;
86  82 
87             &.selected-item { 83             &.selected-item {
88                 .lib-css(border-color, @checkout-shipping-item__active__border-color); 84                 .lib-css(border-color, @checkout-shipping-item__active__border-color);
89  85 
90                 &:after { 86                 &:after {
91                     .lib-css(background, @checkout-shipping-item-icon__background-color); 87                     .lib-css(background, @checkout-shipping-item-icon__background-color);
92                     .lib-css(color, @checkout-shipping-item-icon__color); 88                     .lib-css(color, @checkout-shipping-item-icon__color);
93                     .lib-css(content, @checkout-shipping-item-icon__content); 89                     .lib-css(content, @checkout-shipping-item-icon__content);
94                     .lib-css(font-family, @icons__font-name); 90                     .lib-css(font-family, @icons__font-name);
95                     .lib-css(height, @checkout-shipping-item-icon__selected__height); 91                     .lib-css(height, @checkout-shipping-item-icon__selected__height);
96                     .lib-css(width, @checkout-shipping-item-icon__selected__width); 92                     .lib-css(width, @checkout-shipping-item-icon__selected__width);
97                     font-size: 19px; 93                     font-size: 19px;
98                     line-height: 21px; 94                     line-height: 21px;
99                     padding-top: 2px; 95                     padding-top: 2px;
100                     position: absolute; 96                     position: absolute;
101                     left: 0; 97                     left: 0;
102                     text-align: center; 98                     text-align: center;
103                     top: 0; 99                     top: 0;
104                 } 100                 }
105  101 
106                 .action-select-shipping-item { 102                 .action-select-shipping-item {
107                     &:extend(.abs-no-display-s all); 103                     &:extend(.abs-no-display-s all);
108                     visibility: hidden; 104                     visibility: hidden;
109                 } 105                 }
110             } 106             }
111         } 107         }
112  108 
113         .field { 109         .field {
114             &.addresses { 110             &.addresses {
115                 &:extend(.abs-add-clearfix all); 111                 &:extend(.abs-add-clearfix all);
116             } 112             }
117         } 113         }
118  114 
119         .action-show-popup { 115         .action-show-popup {
120             margin: 0 0 @indent__base; 116             margin: 0 0 @indent__base;
121             > span { 117             > span {
122                 &:before { 118                 &:before {
123                     content: '+'; 119                     content: '+';
124                     padding-right: @indent__xs; 120                     padding-right: @indent__xs;
125                 } 121                 }
126             } 122             }
127         } 123         }
128  124 
129         .action-select-shipping-item { 125         .action-select-shipping-item {
130             float: left; 126             float: left;
131             margin: @indent__base 0 0; 127             margin: @indent__base 0 0;
132         } 128         }
133  129 
134         .edit-address-link { 130         .edit-address-link {
135             &:extend(.abs-action-button-as-link all); 131             &:extend(.abs-action-button-as-link all);
136             display: block; 132             display: block;
137             float: right; 133             float: right;
138             margin: 26px 0 0 5px; 134             margin: 26px 0 0 5px;
139         } 135         }
140     } 136     }
141  137 
142     // 138     //
143     //  Shipping Methods 139     //  Shipping Methods
144     //  --------------------------------------------- 140     //  ---------------------------------------------
145  141 
146     .checkout-shipping-method { 142     .checkout-shipping-method {
147         .step-title { 143         .step-title {
148             margin-bottom: 0; 144             margin-bottom: 0;
149         } 145         }
150         .no-quotes-block { 146         .no-quotes-block {
151             margin: @indent__base 0; 147             margin: @indent__base 0;
152         } 148         }
153     } 149     }
154  150 
155     .methods-shipping { 151     .methods-shipping {
156         .actions-toolbar { 152         .actions-toolbar {
157             .action { 153             .action {
158                 &.primary { 154                 &.primary {
159                     &:extend(.abs-button-l all); 155                     &:extend(.abs-button-l all);
160                     margin: @indent__base 0 0; 156                     margin: @indent__base 0 0;
161                 } 157                 }
162             } 158             }
163         } 159         }
164     } 160     }
165  161 
166     .table-checkout-shipping-method { 162     .table-checkout-shipping-method {
167         thead { 163         thead {
168             th { 164             th {
169                 display: none; 165                 display: none;
170                 font-weight: 600; 166                 font-weight: 600;
171             } 167             }
172         } 168         }
173         tbody { 169         tbody {
174             td { 170             td {
175                 .lib-css(border-top, @checkout-shipping-method__border); 171                 .lib-css(border-top, @checkout-shipping-method__border);
176                 .lib-css(padding-bottom, @checkout-shipping-method__padding); 172                 .lib-css(padding-bottom, @checkout-shipping-method__padding);
177                 .lib-css(padding-top, @checkout-shipping-method__padding); 173                 .lib-css(padding-top, @checkout-shipping-method__padding);
178                 &:first-child { 174                 &:first-child {
179                     padding-left: 0; 175                     padding-left: 0;
180                     padding-right: 0; 176                     padding-right: 0;
181                     width: 20px; 177                     width: 20px;
182                 } 178                 }
183             } 179             }
184             tr { 180             tr {
185                 &:first-child { 181                 &:first-child {
186                     td { 182                     td {
187                         border-top: none; 183                         border-top: none;
188                     } 184                     }
189                 } 185                 }
190             } 186             }
191             .col-price { 187             .col-price {
192                 font-weight: @font-weight__semibold; 188                 font-weight: @font-weight__semibold;
193             } 189             }
194             .row-error { 190             .row-error {
195                 td { 191                 td {
196                     border-top: none; 192                     border-top: none;
197                     padding-bottom: @indent__s; 193                     padding-bottom: @indent__s;
198                     padding-top: 0; 194                     padding-top: 0;
199                 } 195                 }
200             } 196             }
201         } 197         }
202     } 198     }
203 } 199 }
204  200 
205 // 201 //
206 //  Mobile 202 //  Mobile
207 //  _____________________________________________ 203 //  _____________________________________________
208  204 
209 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) { 205 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
210     .opc-wrapper { 206     .opc-wrapper {
211         .form-login, 207         .form-login,
212         .form-shipping-address, 208         .form-shipping-address,
213         .methods-shipping { 209         .methods-shipping {
214             .lib-css(background, @checkout-step-content-mobile__background);    
215             .lib-css(margin, @checkout-step-content-mobile__margin); 210             .lib-css(margin, @checkout-step-content-mobile__margin);
216             .lib-css(padding, @indent__base @checkout-step-content-mobile__margin-s); 211             .lib-css(padding, @indent__base @checkout-step-content-mobile__margin-s);
217         } 212         }
218  213 
219         .form-login { 214         .form-login {
220             + .form-shipping-address { 215             + .form-shipping-address {
221                 .lib-css(margin-top, -(@checkout-step-content-mobile__margin-s)); 216                 .lib-css(margin-top, -(@checkout-step-content-mobile__margin-s));
222             } 217             }
223         } 218         }
224  219 
225         .shipping-address-item { 220         .shipping-address-item {
226             .lib-css(border-bottom, 1px solid @checkout-shipping-item-before__border-color); 221             .lib-css(border-bottom, 1px solid @checkout-shipping-item-before__border-color);
227             .lib-css(margin, @checkout-shipping-item-mobile__margin); 222             .lib-css(margin, @checkout-shipping-item-mobile__margin);
228             .lib-css(padding, @checkout-shipping-item-mobile__padding); 223             .lib-css(padding, @checkout-shipping-item-mobile__padding);
229             .lib-css(width, @checkout-shipping-item-mobile__width); 224             .lib-css(width, @checkout-shipping-item-mobile__width);
230             &.selected-item { 225             &.selected-item {
231                 .lib-css(padding, @checkout-shipping-item-mobile__active__padding); 226                 .lib-css(padding, @checkout-shipping-item-mobile__active__padding);
232                 border-bottom-width: 2px; 227                 border-bottom-width: 2px;
233  228 
234                 .edit-address-link { 229                 .edit-address-link {
235                     .lib-css(left, @checkout-shipping-item-icon__selected__width + @indent__s); 230                     .lib-css(left, @checkout-shipping-item-icon__selected__width + @indent__s);
236                 } 231                 }
237             } 232             }
238         } 233         }
239  234 
240         .action-select-shipping-item { 235         .action-select-shipping-item {
241             float: none; 236             float: none;
242             margin-top: @indent__s; 237             margin-top: @indent__s;
243             width: 100%; 238             width: 100%;
244         } 239         }
245  240 
246         .action-show-popup { 241         .action-show-popup {
247             width: 100%; 242             width: 100%;
248         } 243         }
249  244 
250         .methods-shipping { 245         .methods-shipping {
251             .lib-css(border-bottom, @checkout-step-title__border); 246             .lib-css(border-bottom, @checkout-step-title__border);
252             padding-top: @indent__l; 247             padding-top: @indent__l;
253         } 248         }
254  249 
255         .edit-address-link { 250         .edit-address-link {
256             .lib-icon-font( 251             .lib-icon-font(
257                 @icon-edit, 252                 @icon-edit,
258                 @_icon-font-size: 18px, 253                 @_icon-font-size: 18px,
259                 @_icon-font-line-height: 20px, 254                 @_icon-font-line-height: 20px,
260                 @_icon-font-text-hide: true, 255                 @_icon-font-text-hide: true,
261                 @_icon-font-color: @minicart-icons-color, 256                 @_icon-font-color: @minicart-icons-color,
262                 @_icon-font-color-hover: @primary__color, 257                 @_icon-font-color-hover: @primary__color,
263                 @_icon-font-color-active: @minicart-icons-color 258                 @_icon-font-color-active: @minicart-icons-color
264             ); 259             );
265             margin: 0; 260             margin: 0;
266             position: absolute; 261             position: absolute;
267             left: 0; 262             left: 0;
268             top: 5px; 263             top: 5px;
269         } 264         }
270     } 265     }
271 } 266 }
272  267 
273 // 268 //
274 //  Desktop 269 //  Desktop
275 //  _____________________________________________ 270 //  _____________________________________________
276  271 
277 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { 272 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
278     .checkout-shipping-method { 273     .checkout-shipping-method {
279         .actions-toolbar { 274         .actions-toolbar {
280             > .primary { 275             > .primary {
281                 float: left; 276                 float: left;
282             } 277             }
283             .action { 278             .action {
284                 &.primary { 279                 &.primary {
285                     margin: 0; 280                     margin: 0;
286                 } 281                 }
287             } 282             }
288         } 283         }
289     } 284     }
290     .opc-wrapper { 285     .opc-wrapper {
291         .form-login, 286         .form-login,
292         .form-shipping-address { 287         .form-shipping-address {
293             .lib-css(max-width, @checkout-shipping-address__max-width); 288             .lib-css(max-width, @checkout-shipping-address__max-width);
294         } 289         }
295  290 
296         .form-login { 291         .form-login {
297             .lib-css(border-bottom, @checkout-step-title__border); 292             .lib-css(border-bottom, @checkout-step-title__border);
298             padding-bottom: @indent__base; 293             padding-bottom: @indent__base;
299         } 294         }
300     } 295     }
301     .table-checkout-shipping-method { 296     .table-checkout-shipping-method {
302         width: auto; 297         width: auto;
303     } 298     }
304 } 299 }
305  300 
306 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) { 301 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
307     .opc-wrapper { 302     .opc-wrapper {
308         .shipping-address-item { 303         .shipping-address-item {
309             .lib-css(width, @checkout-shipping-item__width); 304             .lib-css(width, @checkout-shipping-item__width);
310  305 
311             &:before { 306             &:before {
312                 .lib-css(background, @checkout-shipping-item-before__border-color); 307                 .lib-css(background, @checkout-shipping-item-before__border-color);
313                 .lib-css(height, @checkout-shipping-item-before__height); 308                 .lib-css(height, @checkout-shipping-item-before__height);
314                 content: ''; 309                 content: '';
315                 right: 0; 310                 right: 0;
316                 position: absolute; 311                 position: absolute;
317                 top: 0; 312                 top: 0;
318                 width: 1px; 313                 width: 1px;
319             } 314             }
320  315 
321             &:nth-child(3n+1) { 316             &:nth-child(3n+1) {
322                 &:before { 317                 &:before {
323                     display: none; 318                     display: none;
324                 } 319                 }
325             } 320             }
326  321 
327             &.selected-item { 322             &.selected-item {
328                 &:before { 323                 &:before {
329                     display: none; 324                     display: none;
330                 } 325                 }
331  326 
332                 + .shipping-address-item { 327                 + .shipping-address-item {
333                     &:before { 328                     &:before {
334                         display: none; 329                         display: none;
335                     } 330                     }
336                 } 331                 }
337             } 332             }
338         } 333         }
339     } 334     }
340     .table-checkout-shipping-method { 335     .table-checkout-shipping-method {
341         min-width: 500px; 336         min-width: 500px;
342     } 337     }
343 } 338 }